import { createEffect, createSignal, Index } from "solid-js";
import Track, { Word } from "./track/track.tsx";
import { useRafFn } from 'solidjs-use';
import { VOCABULARY } from "../../config.ts";



export default function Game(props: {tracks: number, time: number}) {
  // const [time, setTime] = createSignal<number>(props.time * 1000);

  // const {pause} = useRafFn(({ delta }) => {
  //   setTime(time() - delta);
  // })

  // createEffect(() => {
  //   if (time() <= 0) {
  //     pause();
  //     setTime(0);

  //     // TODO: game over
  //   }
  // })

  return <div class='w-full h-full flex'>
    <Index each={(() => new Array<never>(props.tracks))()}>{(_el, i) =>
      <Track id={i} vocabularies={VOCABULARY}></Track>
    }</Index>
  </div>;
}